<template>
	<view class="page">
		<view class="grid">
			<view v-for="(item,index) in 6" :key="index" class="box">
				GridBox
			</view>
			<view class="box">
				<!-- 添加一个容器来包裹文本 -->
				<view class="text-container">
					作为“绿水青山就是金山银山”理念的发源地，短短十多年，浙江省湖州市安吉县余村走出了一条生态美、产业兴、百姓富的可持续发展之路。

					2023年，在十四届全国人大一次会议的“代表通道”上，全国人大代表、浙江省湖州市安吉县余村村党支部书记汪玉成分享了余村的故事。
				</view>
			</view>
			<view class="box">
				GridBox
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const girls = ref([]);

	function network() {
		uni.request({
			url: "https://tea.qingnian8.com/tools/taoShow",
			data: {
				size: 10
			}
		}).then(res => {
			console.log(res);
			girls.value = res.data.data;
		});
	}

	network();

	const onPreview = (index) => {
		let imgs = girls.value.map(item => item.url);
		uni.previewImage({
			current: index,
			urls: imgs
		});
		console.log(index);
	};
</script>

<style lang="scss" scoped>
	.page {
		/* 确保页面有足够的内边距 */
		padding: 30rpx;
	}

	.box {
		.title {
			position: relative;
			padding: 0 30rpx 0 80rpx;

			&:before {
				content: '';
				position: absolute;
				top: -24rpx;
				left: 12rpx;
				width: 48rpx;
				display: inline-block;
				height: 48rpx;
				border-radius: 50%;
				background: #fff;
			}
		}

		.comment {
			padding: 24rpx 30rpx 32rpx;
			font-size: 28rpx;
			color: #888;
		}

		background: #fff;
		box-shadow: 0 2px 4px #00000014;
		margin-bottom: 24rpx;
		aspect-ratio: 1/1;
		/* 允许文本换行 */
		word-wrap: break-word;
		overflow-wrap: break-word;
	}

	.text-container {
		/* 确保文本容器不会超出网格项 */
		max-width: 100%;
	}

	.grid {
		display: grid;
		gap: 30rpx;
		grid-template-columns: repeat(2, 1fr);
		/* 确保网格布局不会超出页面宽度 */
		max-width: 100%;
	}
</style>